<template>
    <h1>data</h1>
    <p>{{ name }}</p>
    <h1>props</h1>
    <p>{{ title }}</p>
    <h1>methods</h1>
    <button @click="test">触发</button>
    <h1>computed</h1>
    <p>num 是 {{ num }}</p>
    <p>num 是 {{ num2 }}</p>
    <button @click="addOne">+1</button>
</template>


<script>
export default {
    data() {
        return {
            name: '李白',
            num:123
        }
    },
    watch: {
        num: function (newwal, oldwal) {
            console.log("newwal", newwal);
            console.log("oldwal", oldwal);

        }
    },
    computed: {
        num2() {
            return this.num + 1
        }
    },
    props: {
        title: {
            type: String,
            required: true,
            default: "这是一个默认的title"
        }
    },
    methods: {
        test() {
            console.log(123);
            console.log(this.name);
            this.name = "杜甫"
            console.log(this.name);
            this.testFn()

            console.log("this.num2", this.num2)
        },
        testFn() {
            console.log("这是 另外一个方法")
        }
    },
    addOne() {
        this.num = this.num + 1
    }
}
</script>